<template>
	<view class="payTel">
		<view class="topBox">
			<view class="title">填写入网信息</view>
			<view class="textBox mTop2"><view class="text">请按照真实情况填写入网信息</view></view>
		</view>

		<view class="formBox mTop4">
			<view class="item">
				<view class="label">号码编号</view>
				<view class="inputBox flex1"><input class="input redText" type="text" disabled v-model="form.mobile_number" /></view>
			</view>
			<view class="item mTop2">
				<view class="label">所选号码</view>
				<view class="inputBox flex1"><input class="input redText" type="text" disabled v-model="form.mobile_code" /></view>
			</view>
			<view class="item mTop2">
				<view class="label">*姓名</view>
				<view class="inputBox flex1">
					<input class="input" type="text" v-model="form.mobile_name" :disabled="closeEdit" placeholder="请如实填写" placeholder-class="placeholderClase" />
				</view>
			</view>
			<view class="item mTop2">
				<view class="label">*联系电话</view>
				<view class="inputBox flex1">
					<input class="input" type="number" v-model="form.mobile_phone" :disabled="closeEdit" placeholder="现用联系方式" placeholder-class="placeholderClase" />
				</view>
			</view>
			<view class="item mTop2">
				<view class="label">学号</view>
				<view class="inputBox flex1">
					<input class="input" type="text" v-model="form.mobile_studentID" :disabled="closeEdit" placeholder="请输入本人学号" placeholder-class="placeholderClase" />
				</view>
			</view>
			<view class="item mTop2">
				<view class="label">*学院</view>
				<view class="inputBox flex1">
					<input class="input" type="text" v-model="form.mobile_academy" :disabled="closeEdit" placeholder="请输入本人学院" placeholder-class="placeholderClase" />
				</view>
			</view>
			<!-- <view class="item mTop2">
				<view class="label">学院</view>
				<view class="inputBox flex1">
					<picker :class="{ closeEdit: closeEdit }" mode="selector" :range="mobileAcademyList" :value="academyIndex" @change="academyChange">
						<view class="picker flex_conter">
							<input class="input picker-input flex1" type="text" v-model="form.mobile_academy" placeholder="请选择学院" placeholder-class="placeholderClase" />
							<view class="input-icon"><uni-icons type="arrowdown" size="13" color="#c0c4cc"></uni-icons></view>
						</view>
					</picker>
				</view>
			</view> -->

			<!-- <view class="item mTop3">
				<view class="label">*办卡地点</view>
				<view class="inputBox flex1">
					<picker mode="selector" :class="{ closeEdit: infoCloseEdit }" :range="mobilePlaceList" :value="placeIndex" @change="placeChange">
						<view class="picker flex_conter">
							<input class="input picker-input flex1" type="text" v-model="form.mobile_place" />
							<view class="input-icon"><uni-icons type="arrowdown" size="13" color="#c0c4cc"></uni-icons></view>
						</view>
					</picker>
				</view>
			</view> -->
			<view class="item mTop2">
				<view class="label">*办卡地点</view>
				<view class="inputBox flex1">
					<input class="input" type="text" v-model="form.mobile_place" :disabled="true" />
				</view>
			</view>
			<view class="item mTop2">
				<view class="label">*领卡时间</view>
				<view class="inputBox flex1">
					<input class="input" type="text" v-model="form.mobile_time" :disabled="true"/>
				</view>
			</view>
			<!-- <view class="item mTop2">
				<view class="label">*领卡时间</view>
				<view class="inputBox flex1">
					<picker mode="selector" :class="{ closeEdit: infoCloseEdit }" :range="timeList" :value="timeIndex" @change="timeChange">
						<view class="picker flex_conter">
							<input class="input picker-input flex1" type="text" v-model="form.mobile_time" />
							<view class="input-icon"><uni-icons type="arrowdown" size="13" color="#c0c4cc"></uni-icons></view>
						</view>
					</picker>
				</view>
			</view> -->
			<view class="item mTop3">
				<view class="label">支付金额</view>
				<view class="inputBox flex1"><input class="input redText" type="text" disabled v-model="form.mobile_amount" /></view>
			</view>
		</view>

		<block v-if="!formClose">
			<view class="bottomBox mTop5">
				<button class="btn" type="default" hover-class="none" @click="confirmPay()" :disabled="confirmDisabled">确认支付</button>
				<view class="text mTop2">请尽快支付，不然此号码可能被其他人抢购</view>
			</view>
		</block>
	</view>
</template>

<script>
var util = require('../../common/util.js');
var jweixin = require('../../common/wxsdk.js');
export default {
	data() {
		return {
			form: {
				mobile_number: '',
				mobile_code: '',
				mobile_name: '',
				mobile_phone: '',
				mobile_studentID: '',
				mobile_academy: '',
				mobile_place: '',
				mobile_time: '开学后',
				mobile_amount: ''
			},
			mobileAcademyList: [],
			academyIndex: 0,
			mobilePlaceList: [],
			placeIndex: 0,
			timeList: [],
			timeIndex: 0,
			order_id: 0,
			closeEdit: false,
			formClose: false,
			infoCloseEdit: false,
			
			confirmDisabled: false,
		};
	},
	onLoad(options) {
		console.log(options);
		if (options.order_id) {
			this.order_id = options.order_id;
			if (options.order_status == 1 || options.order_status == 3 || options.order_status == 4) {
				//已支付  已办理
				this.closeEdit = true;
				this.formClose = true;
				this.infoCloseEdit = true;
			} else if (options.order_status == 2) {
				//待支付
				this.closeEdit = true;
			}
			this.getOrderInfo(options.order_id);
		} else {
			this.getPreOrderInfo(options.mobile_id);
		}
	},
	methods: {
		//获取订单详情
		getOrderInfo(order_id) {
			util.requestPost(
				'index/getOrderInfo',
				{ order_id },
				res => {
					if (res.code == 1) {
						this.form.mobile_number = res.data.list.mobile_number;
						this.form.mobile_code = res.data.list.mobile_code;
						this.form.mobile_academy = res.data.list.mobile_academy;
						this.form.mobile_name = res.data.list.mobile_user_name;
						this.form.mobile_phone = res.data.list.mobile_user_phone;
						this.form.mobile_studentID = res.data.list.mobile_user_studentID;
						this.form.mobile_time = res.data.list.mobile_time;

						this.mobilePlaceList = res.data.mobilePlaceList;
						this.mobileAcademyList = res.data.mobileAcademyList;
						this.form.mobile_place = res.data.mobile_place;
						this.timeList = res.data.timeList;
						this.form.mobile_amount = res.data.money;
					} else {
					}
				},
				err => {
					console.log(err);
				},
				{ isShowLoading: false }
			);
		},

		//获取预下单号码信息
		getPreOrderInfo(mobile_id) {
			util.requestPost(
				'index/getPreOrderInfo',
				{ mobile_id: mobile_id },
				res => {
					if (res.code == 1) {
						this.form.mobile_number = res.data.list.mobile_number;
						this.form.mobile_code = res.data.list.mobile_code;
						this.form.mobile_place = res.data.mobile_place;
						this.mobilePlaceList = res.data.mobilePlaceList;
						this.mobileAcademyList = res.data.mobileAcademyList;
						this.timeList = res.data.timeList;
						this.form.mobile_amount = res.data.money;
					} else {
					}
				},
				err => {
					console.log(err);
				},
				{ isShowLoading: false }
			);
		},

		//前往支付
		confirmPay() {
			let that = this;
			this.confirmDisabled = true

			util.requestPost(
				'index/confirmPay',
				{ order_id: that.order_id, form: JSON.stringify(that.form) },
				res => {
					if (res.code == 1) {
						that.jsApiParameters = res.data.list;
						if (typeof WeixinJSBridge == 'undefined') {
							if (document.addEventListener) {
								document.addEventListener('WeixinJSBridgeReady', that.jsApiCall, false);
							} else if (document.attachEvent) {
								document.attachEvent('WeixinJSBridgeReady', that.jsApiCall);
								document.attachEvent('onWeixinJSBridgeReady', that.jsApiCall);
							}
						} else {
							that.jsApiCall();
						}
						// jweixin.config({
						// 	debug: false,
						// 	appId: res.data.list.appId, // 必填，公众号的唯一标识
						// 	timestamp: res.data.list.timeStamp, // 必填，生成签名的时间戳
						// 	nonceStr: res.data.list.nonceStr, // 必填，生成签名的随机串
						// 	signature: res.data.list.paySign,// 必填，签名
						// 	jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
						// });

						// jweixin.ready(function(){
						//   jweixin.chooseWXPay({
						//     timestamp: res.data.list.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						//     nonceStr: res.data.list.nonceStr, // 支付签名随机串，不长于 32 位
						//     package: res.data.list.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						//     signType: res.data.list.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
						//     paySign: res.data.list.paySign, // 支付签名
						//     success: function (res) {
						//       // 支付成功后的回调函数
						// 		 that.$toast('支付成功')
						// 		 setTimeout(() => {
						// 		 	uni.redirectTo({
						// 		 		url:'/pages/my/personbuy',
						// 				fail(err) {
						// 					uni.showToast({
						// 						title: `跳转失败：${JSON.stringify(err)}`,
						// 						icon: 'none'
						// 					})
						// 				}
						// 		 	})
						// 		 }, 500);
						//     },
						// 	fail(err){
						// 		 that.$toast('支付失败',JSON.stringify(err))
						// 	}
						//   });
						// });
						// jweixin.error(function(res){
						// 	console.log(res)
						// 	that.$toast('请刷新重试')
						// });
					} else {
						this.$toast(res.msg);
					}
					
					setTimeout(() => {
						that.confirmDisabled = false
					}, 700)
				},
				err => {
					console.log(err);
				},
				{ isShowLoading: false }
			);
		},
		jsApiCall: function() {
			var that = this;
			WeixinJSBridge.invoke('getBrandWCPayRequest', that.jsApiParameters, function(res) {
				WeixinJSBridge.log(res.err_msg);
				if (res.err_msg == 'get_brand_wcpay_request:ok') {
					uni.redirectTo({
						url: '/pages/my/personbuy',
						fail(err) {
							uni.showToast({
								title: `跳转失败：${JSON.stringify(err)}`,
								icon: 'none'
							});
						}
					});
				} else {
					uni.showModal({
						title: '支付失败',
						showCancel: false
					});
				}
			});
		},
		academyChange(e) {
			let index = e.target.value;
			this.academyIndex = index;
			this.form.mobile_academy = this.mobileAcademyList[index];
			console.log(this.form.mobile_academy);
			this.$forceUpdate();
		},
		placeChange(e) {
			let index = e.target.value;
			this.placeIndex = index;
			this.form.mobile_place = this.mobilePlaceList[index];
			console.log(this.form.mobile_place);
			this.$forceUpdate();
		},
		timeChange(e) {
			let index = e.target.value;
			this.timeIndex = index;
			this.form.mobile_time = this.timeList[index];
			console.log(this.form.mobile_time);
			this.$forceUpdate();
		}
	}
};
</script>

<style scoped lang="scss">
.payTel {
	padding: 20rpx;
	.topBox {
		color: #ffffff;
		padding: 20rpx;
		text-align: center;
		border-radius: 20rpx;
		background: $btn-bg-color;
		.textBox {
			.text {
				font-size: 26rpx;
			}
		}
	}
	.formBox {
		.item {
			border: $border-base;
			border-radius: 12rpx;
			display: flex;
			align-items: stretch;
			.label {
				width: 200rpx;
				font-size: 28rpx;
				text-align: center;
				height: 68rpx;
				line-height: 68rpx;
				border-right: $border-base;
				background-color: $bg-color;
			}
		}
		.inputBox {
			.input {
				font-size: 28rpx;
				height: 68rpx;
				line-height: 68rpx;
				padding: 0 20rpx;
			}
			.input-icon {
				margin: 0 20rpx;
			}
			.picker-input {
				pointer-events: none;
			}
			.placeholderClase {
				font-size: 24rpx;
			}
		}
	}
	.bottomBox {
		.btn {
			width: 460rpx;
			color: #ffffff;
			font-size: 28rpx;
			line-height: 76rpx;
			border-radius: 20rpx;
			background: $btn-bg-color;
			&::after {
				border: none;
			}
		}
		.text {
			color: #666;
			font-size: 20rpx;
			text-align: center;
		}
	}
}
.closeEdit {
	pointer-events: none;
}
</style>
